<template>
	<view class="">
		<view :style="{'background':  bg}" class="my-head">
			<pick-regions @getRegion="handleGetRegion" :defaultRegion="defaultRegion">
				<view class="fl-t  address" :style="{'color':color}">{{city}}
					<!-- <u-icon name="arrow-down" size="22" :color="color" @click="selCity"></u-icon> -->
					<view></view>
				</view>
			</pick-regions>
			<!-- 
			<view class="name" v-if="pattern" :class="{'fontSize':activation}" :style="{'color':color}"
				@click="clickTab(true)">视频
				<view v-if="activation" style="background-color: #fff;" :class="{'fontSize':activation}" ></view>
			</view>
			-->
			<view class="name" v-if="pattern" :class="{'fontSize':!activation}" :style="{'color':color}"
				@click="clickTab(false)">推荐
				<view v-if="!activation" style="background-color: #fff;" :class="{'fontSize':activation}"></view>
			</view>

			<view class="name-list" v-if="!pattern" :style="{'color':color}"> 为你推荐</view>
			<view class="head-right  fl-t">
				<view class="icon-exchange">
					<image v-show="activation" src="/static/recruit/index/qhuan.png" mode=""
						style="width:36rpx;height: 36rpx;" @click="switchPattern(pattern)"></image>
					<image v-show="!activation" src="/static/recruit/index/zh.png" mode=""
						style="width:36rpx;height: 36rpx;" @click="switchPattern(pattern)"></image>
				</view>
				<image src="/static/recruit/index/search.png" mode="" style="width:40rpx;height: 40rpx;"
					@click="goSearch()"></image>
			</view>
		</view>
		<view class="occupy"></view>
	</view>
</template>

<script>
	import pickRegions from '@/pages/component/pick-regions/pick-regions.vue'
	export default {
		props: {
			bg: {
				type: String,
				// default: "#1684fc"
			},
			region: { //定位
				type: Array,
				default () {
					return []
				}
			},
			color: {
				type: String,
				default: "#fff"
			},
			activationIng: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				selRegion: this.region, //定位或者选择的省市区
				city: '', //显示的市区
				pattern: true, //展示模式  true默认  false切换
				activation: false, //ture  视频  推荐
				filter: ["重庆市", "上海市", "天津市", "北京市"],
				defaultRegion: ["重庆市", "", ""],
				isSel: false, //是否是选择
			}
		},
		onLoad(o) {},
		components: {
			pickRegions
		},
		computed: {

		},
		onShow() {},
		// 初次渲染
		onReady() {},
		watch: {
			activationIng: {
				handler(nVal) {
					this.activation = nVal
				},
				immediate: true
			},
			region: {
				handler(region, oldRegion) {
					this.selRegion = region;
				},
				immediate: true,
			},
			selRegion: {
				handler(selRegion, oldRegion) {
					if (selRegion.length == 1) {
						this.city = selRegion[0];
						this.$emit("locationFilter", this.city);
						return
					}
					if (selRegion.length == 0) {
						this.city = '';
						this.$emit("locationFilter", '');
						return;
					}
					if (this.isSel) {
						if (this.filter.includes(selRegion[0])) { //存在 
							if (selRegion[2] == "全部") {
								this.city = selRegion[0];
								this.$emit("locationFilter", selRegion[0]);
							} else {
								this.city = selRegion[2];
								this.$emit("locationFilter", selRegion[2]);
							}
						} else {
							if (selRegion[2] == "全部") {
								this.city = selRegion[1];
								this.$emit("locationFilter", selRegion[1]);
							} else {
								this.city = selRegion[2];
								this.$emit("locationFilter", selRegion[2]);
							}
						}
					} else {
						if (this.filter.includes(selRegion[0].name)) { //存在 
							this.city = selRegion[0];
							this.defaultRegion = [selRegion[0], "", selRegion[2]];
							this.$emit("locationFilter", selRegion[0]);
						} else {
							this.city = selRegion[1];
							this.defaultRegion = selRegion;
							this.$emit("locationFilter", selRegion[1]);
						}
					}
					//数据传出去
				},
				immediate: false,
			}
		},
		methods: {
			goSearch() {
				console.log("搜索")
				uni.navigateTo({
					url: '/pages/views/packageA/type-jobhunting/search/search',
				});

			},

			handleGetRegion(e) { //获取到的数据
				this.isSel = true;
				this.selRegion = e;
			},

			selCity() {
				this.$emit("selCity");
			},
			switchPattern(pattern) {
				console.log("切换")
				this.pattern = !pattern;
				this.$emit("updatePattern", this.pattern);
			},
			clickTab(activation) {
				if (activation == this.activation) {
					return;
				}
				this.activation = activation;
				this.$emit("activation", activation);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.occupy {
		height: calc(88rpx + var(--status-bar-height));
	}

	.my-head {
		position: fixed;
		top: 0;
		width: 100%;
		padding-top: var(--status-bar-height);
		// padding-top: var(--status-bar-height) 50rpx 0 30rpx;
		height: calc(88rpx + var(--status-bar-height));
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		z-index: 999;
		padding-left: 15%;

		.address {
			font-size: 28rpx;
			font-family: PingFang-SC-Heavy;
			// font-weight: bold;''
			margin-left: 30rpx;
		}

		.name {
			font-size: 32rpx;
			font-family: PingFang-SC-Heavy;
			font-weight: 800;
			color: #FFFFFF;
			position: relative;
			// position: fixed;
			// width: 100%;
			// line-height: 100%;
			// display: flex;
			// justify-content: center;
			// align-items: center;
			// white-space: nowrap;

			view {
				position: absolute;
				left: 50%;
				bottom: -10rpx;
				height: 4rpx;
				width: 60rpx;
				transform: translate(-50%, 0);
				border-radius: 2rpx;

			}
		}

		.name-list {
			font-size: 32rpx;
			font-family: PingFang-SC-Heavy;
			font-weight: 800;
			color: #FFFFFF;
			// position: fixed;
			// width: 100%;
			// line-height: 100%;
			// display: flex;
			// justify-content: center;
			// align-items: center;
			// white-space: nowrap;
		}

		.fontSize {
			font-size: 36rpx;
		}

		.icon-exchange {
			padding-top: 10rpx;
			margin-right: 24rpx;

			img {}
		}

		.head-right {
			display: flex;
			justify-content: center;
			margin-right: 50rpx;
		}
	}
</style>